<template>
    <NavBar :title="info.title" />
    <!-- {{ info }} -->
    <div class="business-container">

        <div class="top">
            <img class="logo" v-lazy="baseUrl + info.logo" alt="">
            <div>
                <h3>{{ info.title }}</h3>
                <p>
                    <span class="iconfont icon-phone06 fs22"></span>
                    <a style="color:#333" :href="`tel:${info.phone}`">{{ info.phone }}</a>
                </p>
                <p>
                    <span class="iconfont icon-iconfontditu fs22"></span>
                    {{ info.address }}
                </p>
            </div>
        </div>
        <van-divider></van-divider>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img v-lazy="baseUrl + item.img" style="height:120px;width: 100%;" alt="">
            </van-swipe-item>
        </van-swipe>
        <van-divider>
            <h3>医师列表</h3>
        </van-divider>
        <van-empty description="暂无医生数据" v-if="doctorList.length == 0"></van-empty>
        <van-card :title="item.name" v-for="item in doctorList" :key="item.id">
            <template #thumb>
                <img style="width: 80px;height: 80px;" v-lazy="baseUrl + item.avatar" alt="">
            </template>
            <template #tags>
                <p>
                    职称:
                    <van-tag round type="primary">{{ item.title }}</van-tag>
                </p>
                <p>擅长领域:
                    <van-space>
                        <van-tag round type="primary" plain v-for="(v, i) in item.tags" :key="i">{{ v }}</van-tag>
                    </van-space>
                </p>
                <p>所属机构:
                    {{ item.bus_title }}
                </p>
            </template>
            <template #footer>
                <van-button v-if="role_id !== 1" round size="mini" type="primary"
                    :to="{ name: 'appoint', query: { doctorid: item.id } }">
                    立即预约
                </van-button>
                <van-button round size="mini" type="primary" :to="{ name: 'personHome', query: { id: item.id } }" plain>
                    医生主页
                </van-button>
            </template>
        </van-card>

        <!-- 地图 -->
        <div id="map" style="height: 300px;background-color: #eee;"></div>
    </div>
</template>

<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { BusinessType, BannerType, DoctorType } from '@/types';
import { getBusinessInfo, getBannerlist, getDoctorlist } from '@/utils/api';
import { onMounted, ref, Ref, onUnmounted } from 'vue';
import { useQuery, $useRouter } from '@/utils/hooks';
const { token, role_id } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
const info: Ref<BusinessType> = ref({})
const router = $useRouter();
const bannerList = ref<BannerType[]>([]);
const doctorList = ref<DoctorType[]>([]);
// 保存地图对象
let map: any = null;
onMounted(async () => {
    var { id } = useQuery();
    if (!id) {
        router.replace('/');
        return false;
    }
    const { data: { data: bInfo } } = await getBusinessInfo(id);
    info.value = bInfo;
    const { data: { data: imgs } } = await getBannerlist(id);
    bannerList.value = imgs;
    const { data: { data } } = await getDoctorlist(id);
    doctorList.value = data;


    // 初始化地图
    AMapLoader.load({
        key: '1619945785bc7afebef678060c9dabe1',
        version: '2.0',
        plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
        AMapUI: {
            version: '1.1',
            plugins: [],
        },
    }).then((AMap) => {
        const { lnglat, title } = bInfo;
        const [longitude, latitude] = lnglat.split(',')
        // 初始化地图
        map = new AMap.Map('map', {
            zoom: 16,
            center: [longitude, latitude], // 初始化地图中心点
        });
        // 添加标记
        const text = new AMap.Text({
            position: new AMap.LngLat(longitude, latitude),
            offset: new AMap.Pixel(-10, -10),
            text: title,
            title,
        });
        const marker = new AMap.Marker({
            position: new AMap.LngLat(longitude, latitude),
            offset: new AMap.Pixel(40, -80),
            // icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
            icon: 'http://localhost:3000/uploads/marker/marker.png',
            title,
        });

        map.add(marker);
        map.add(text);


    }).catch(e => {
        console.log(e);
    });

});

onUnmounted(() => {
    // 销毁地图实例
    map?.destroy();
});
</script>

<style lang="scss" scoped>
.business-container {
    padding: 10px;

    .top {
        display: flex;
        align-items: center;

        .logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid rgba($color: #000000, $alpha: 0.4)
        }

        div {
            flex: 1;
            margin-left: 20px;

            .fs22 {
                font-size: 22px;
            }
        }
    }

}
</style>